import React from "react";
import { Delete as DeleteIcon } from "@ct0/icons";
import useStyles from "./styles";
import Conditions from "./Conditions";
import { isEmpty } from "@ct0/functions";
import type { RevealProps, RevealFieldBase } from "./type";

export default function NestFilterReveal<V extends RevealFieldBase>({
  conditions,
  texts,
  fields,
  tailSlot,
  onTextsChange,
  onConditionsChange,
}: RevealProps<V>) {
  const classes = useStyles();

  if (isEmpty(texts) && isEmpty(conditions) && !tailSlot) return null;
  if (isEmpty(texts) && isEmpty(conditions) && tailSlot) return <>{tailSlot}</>;

  const removeText = (index: number) => {
    onTextsChange?.([...texts!.slice(0, index), ...texts!.slice(index + 1)]);
    return undefined;
  };

  return (
    <div className={classes.panel}>
      <div className={classes.clauses}>
        <Conditions
          conditions={conditions}
          fields={fields}
          onChange={onConditionsChange}
          tailSlot={tailSlot}
        />
        {texts?.map((text, index) => (
          <div className={classes.singleClause} key={index}>
            <span className={classes.singleClauseValue}>{text}</span>
            <span
              className={classes.singleClauseClose}
              onClick={() => removeText(index)}
            >
              <DeleteIcon />
            </span>
          </div>
        ))}
      </div>
    </div>
  );
}
